<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>姓名案例插值</title>
    <!-- 引入 Vue 2 的 CDN 文件 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
    <!-- 
     computed和watch之间的区别：
        1.computed能完成的功能，watch都可以完成。
        2.watch能完成的功能，computed不一定能完成，例如：watch可以进行异步操作。
    两个重要的小原则：
        1.所被Vue管理的函数，最好写成普通函数，这样this的指向才是vm或组件实例对象。
        2.所有不被Vue所管理的函数（定时器的回调函数、ajax的回调函数等），最好写成箭头函数，
        这样this的指向才是vm或组件实例对象。
    -->
    <div id="app">
        姓<input type="text" v-model="firstName"><br/>
        名<input type="text" v-model="lastName"><br/>
        姓名<span>{{fullName}}</span>
        <hr/>
        姓名<span>{{fullName2}}</span>
    </div>

    <script>
        const vm = new Vue({
            el: '#app',
            data: {
                firstName: '张',
                lastName: '三',
                fullName2:'张-三',
            },
            methods: {
              
            },
            //无法开启异步任务，箭头函数有问题，依赖返回值
            computed: {
                fullName() {
                    return this.firstName +'-'+ this.lastName;
                } 
            },
            //高级平替，更细致一些
            watch: {
                firstName(newVal, oldVal) {
                    this.fullName2 = newVal + '-' + this.lastName;
                },
                lastName(newVal, oldVal) {
                    this.fullName2 = this.firstName + '-' + newVal;
                }

            }



            
        });
    </script>

</body>
</html> 